<?php
// 初始化游戏棋盘
function initGameBoard() {
    $board = [
        ['name' => '起点', 'type' => 'start'],
        ['name' => '地产 A', 'type' => 'property', 'price' => 100, 'owner' => null],
        ['name' => '幸运事件', 'type' => 'event'],
        ['name' => '地产 B', 'type' => 'property', 'price' => 150, 'owner' => null],
        ['name' => '监狱', 'type' => 'jail'],
        ['name' => '地产 C', 'type' => 'property', 'price' => 200, 'owner' => null],
        ['name' => '税收', 'type' => 'tax', 'amount' => 50],
        ['name' => '地产 D', 'type' => 'property', 'price' => 250, 'owner' => null]
    ];
    return $board;
}

// 初始化玩家信息
function initPlayers() {
    $players = [
        [
            'name' => 'Player 1',
            'position' => 0,
            'money' => 1000
        ],
        [
            'name' => 'Player 2',
            'position' => 0,
            'money' => 1000
        ]
    ];
    return $players;
}

$board = initGameBoard();
$players = initPlayers();
$currentPlayerIndex = 0;
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大富翁游戏</title>
    <style>
        body {
            text-align: center;
        }

        #game-board {
            display: flex;
            flex-wrap: wrap;
            width: 800px;
            margin: 0 auto;
        }

        .cell {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .player {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin: 2px;
        }

        .player1 {
            background-color: red;
        }

        .player2 {
            background-color: blue;
        }

        #player-info {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <h1>大富翁游戏</h1>
    <div id="game-board">
        <?php
        foreach ($board as $index => $cell) {
            echo '<div class="cell" data-index="' . $index. '">';
            echo $cell['name'];
            foreach ($players as $playerIndex => $player) {
                if ($player['position'] === $index) {
                    echo '<div class="player player' . ($playerIndex + 1). '"></div>';
                }
            }
            echo '</div>';
        }
        ?>
    </div>
    <button id="roll-dice">掷骰子</button>
    <div id="player-info">
        <p id="current-player"></p>
        <p id="player-money"></p>
    </div>
    <p id="message"></p>

    <script>
        const board = document.querySelectorAll('.cell');
        const rollDiceButton = document.getElementById('roll-dice');
        const currentPlayerElement = document.getElementById('current-player');
        const playerMoneyElement = document.getElementById('player-money');
        const messageElement = document.getElementById('message');
        let currentPlayerIndex = <?php echo $currentPlayerIndex; ?>;
        let players = <?php echo json_encode($players); ?>;
        let gameBoard = <?php echo json_encode($board); ?>;

        function updatePlayerInfo() {
            const currentPlayer = players[currentPlayerIndex];
            currentPlayerElement.textContent = `当前玩家: ${currentPlayer.name}`;
            playerMoneyElement.textContent = `当前资金: ${currentPlayer.money}`;
        }

        rollDiceButton.addEventListener('click', function () {
            const diceValue = Math.floor(Math.random() * 6) + 1;
            const currentPlayer = players[currentPlayerIndex];
            const newPosition = (currentPlayer.position + diceValue) % gameBoard.length;

            // 移除玩家原来位置的标记
            const oldCell = board[currentPlayer.position];
            const oldPlayerElement = oldCell.querySelector('.player' + (currentPlayerIndex + 1));
            if (oldPlayerElement) {
                oldCell.removeChild(oldPlayerElement);
            }

            // 更新玩家位置
            currentPlayer.position = newPosition;
            players[currentPlayerIndex] = currentPlayer;

            // 在新位置添加玩家标记
            const newCell = board[newPosition];
            const newPlayerElement = document.createElement('div');
            newPlayerElement.classList.add('player', 'player' + (currentPlayerIndex + 1));
            newCell.appendChild(newPlayerElement);

            const currentCell = gameBoard[newPosition];
            let message = `${currentPlayer.name} 掷出了 ${diceValue}，到达 ${currentCell.name}`;

            if (currentCell.type === 'property') {
                if (currentCell.owner === null) {
                    if (confirm(`${currentPlayer.name}，是否花费 ${currentCell.price} 购买 ${currentCell.name}？`)) {
                        if (currentPlayer.money >= currentCell.price) {
                            currentPlayer.money -= currentCell.price;
                            currentCell.owner = currentPlayer.name;
                            message += `，成功购买 ${currentCell.name}`;
                        } else {
                            message += `，资金不足，无法购买 ${currentCell.name}`;
                        }
                    }
                } else if (currentCell.owner!== currentPlayer.name) {
                    const rent = currentCell.price * 0.1;
                    currentPlayer.money -= rent;
                    const ownerIndex = players.findIndex(player => player.name === currentCell.owner);
                    players[ownerIndex].money += rent;
                    message += `，该地产属于 ${currentCell.owner}，支付租金 ${rent}`;
                }
            } else if (currentCell.type === 'tax') {
                currentPlayer.money -= currentCell.amount;
                message += `，支付税收 ${currentCell.amount}`;
            } else if (currentCell.type === 'event') {
                const randomEvent = Math.random() > 0.5? '获得奖金 200' : '罚款 100';
                if (randomEvent === '获得奖金 200') {
                    currentPlayer.money += 200;
                } else {
                    currentPlayer.money -= 100;
                }
                message += `，触发幸运事件，${randomEvent}`;
            }

            messageElement.textContent = message;
            updatePlayerInfo();

            // 切换玩家
            currentPlayerIndex = (currentPlayerIndex + 1) % players.length;
        });

        updatePlayerInfo();
    </script>
</body>

</html>